<template>
    <div>
        <el-page-header content="添加员工" icon="" title="员工管理" />

        <el-form ref="userFormRef" :model="userForm" :rules="userFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <!-- 用户名 -->
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" type="password" />
            </el-form-item>
            <!-- 角色 -->
            <el-form-item label="角色" prop="role">
                <el-select v-model="userForm.role" class="m-2" placeholder="Select" style="width:100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <!-- 联系电话 -->
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="userForm.phone" />
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email" />
            </el-form-item>
            <!-- 现居住地 -->
            <el-form-item label="现居住地" prop="location">
                <el-input v-model="userForm.location" />
            </el-form-item>
            <!-- 个人简介 -->
            <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="userForm.introduction" type="textarea" />
            </el-form-item>
            <!-- 头像 -->
            <el-form-item label="头像" prop="avatar">
                <Upload :avatar="userForm.avatar" @kerwinchange="handleChange" />
            </el-form-item>
            <!-- 添加用户 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm()">添加员工</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 引入接口等等
import { ref, reactive } from 'vue';
import Upload from '@/components/upload/Upload'
import upload from '@/util/upload';
// import router from '@/router';
import { useRouter } from 'vue-router';


const userFormRef = ref()
const userForm = reactive({
    username: "",
    password: "",
    role: 2,  //1 管理员 ，2 编辑
    introduction: "",
    avatar: "",
    file: null,
    gender:0  //保密
});

// 规则
const userFormRules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    role: [
        { required: true, message: '请选择角色', trigger: 'blur' },
    ],
    phone: [
        { required: false, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    email: [
        { required: false, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    location: [
        { required: false, message: '请输入现居住地', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '请输入个人简介', trigger: 'blur' },
    ],
    avatar: [
        { required: true, message: '请上传头像', trigger: 'blur' },
    ],
});

const options = [{
    label: "管理员",
    value: 1
},
{
    label: "编辑",
    value: 2
},
{
    label: "普通员工",
    value: 3
}];

// 每次选择完图片之后的回调，
const handleChange = (file) => {
    // console.log(file.raw)
    // console.log(URL.createObjectURL(file.raw))
    userForm.avatar = URL.createObjectURL(file);
    userForm.file = file;
};

const router = useRouter()
// 添加按钮校验
const submitForm = ()=>{
    userFormRef.value.validate(async (valid)=>{
        if(valid){
            // 提交数据到后端
            // console.log(userForm)
            await upload("/adminapi/user/add",userForm)
            // 成功后跳转页面
            router.push(`/user-manage/userlist`)
        }
    })
}
</script>

<!-- 样式配置 -->
<style lang="scss" scoped>
.demo-ruleForm {
    margin-top: 50px;
}
</style>